@push('title')
    <title>航班动态</title>
@endpush
@push('style2')
<style>

    .layui-table-cell{
        height: auto;
        overflow:visible;
        text-overflow:inherit;
        white-space:normal;
        word-break: break-all;
    }
</style>
@endpush
@extends('layout.layer')
@section('content')

    <form class="layui-form layui-form-pane1" action="" lay-filter="first" style="margin-bottom: 15px">

        <div class="layui-input-inline">
            <div class="layui-input-inline">
                <label class="layui-form-label">航线ID</label>
                <div class="layui-input-inline">
                    <input type="text" name="id" maxlength="50" placeholder="航线ID" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">航司编号</label>
                <div class="layui-input-inline">
                    <input type="text" name="airline" maxlength="50" placeholder="航司编号" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">起飞</label>
                <div class="layui-input-inline">
                    <input type="text" name="depart_code" maxlength="3" placeholder="三字码" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">到达</label>
                <div class="layui-input-inline">
                    <input type="text" name="arrived_code" maxlength="3" placeholder="三字码" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">航班</label>
                <div class="layui-input-inline">
                    <input type="text" name="flight_code" maxlength="6" placeholder="航班" autocomplete="off" class="layui-input" >
                </div>
            </div>

        </div>
        <br>

        <div class="layui-input-inline" style="margin-top: 15px">
            <div class="layui-input-inline">
                <label class="layui-form-label">起始时间</label>
                <div class="layui-input-inline">
                    <input type="text" name="start_at" id="start_at" value="" maxlength="3" placeholder="起始时间" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">查询天数</label>
                <div class="layui-input-inline">
                    <input type="text" name="day_num" value="" min="1" max="9" placeholder="查询天数" autocomplete="off" class="layui-input" >
                </div>
            </div>

            <div class="layui-input-inline">
                <label class="layui-form-label">排序字段</label>
                <div class="layui-input-block">
                    <div id="order_field" style="width: 180px;"></div>
                </div>
            </div>

<!--            <div class="layui-input-inline">
                <label class="layui-form-label">天气日期</label>
                <div class="layui-input-inline">
                    <input type="text" name="weather_day" id="weather_day" value="" min="1" max="9" placeholder="天气日期" autocomplete="off" class="layui-input" >
                </div>
            </div>-->

            <div class="layui-input-inline">
                <label class="layui-form-label">天气类型</label>
                <div class="layui-input-block">
                    <div id="weather_type" style="width: 180px;"></div>
                </div>
            </div>
        </div>
        <br>

        <div class="layui-input-inline" style="margin-top: 15px">

            <div class="layui-input-inline">
                <label class="layui-form-label"></label>
                <div class="layui-input-inline">
                    <button class="layui-btn" id="search-btn" lay-submit lay-filter="*">搜索</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <a class="layui-btn" id="dynamic-download" >下载</a>
                    <a class="layui-btn" id="dynamic-download-delay" >下载(30天延误)</a>
                    <a class="layui-btn" id="dynamic-download-price" >下载(价格空间)</a>
                    <a class="layui-btn" id="dynamic-download-data" >7天数据</a>
                    <a class="layui-btn layui-btn-normal" id="seven-download" >7天内下载</a>
                    <a class="layui-btn layui-btn-normal" id="seven-download-delay" >下载(7天延误）</a>
<!--                    <a class="layui-btn layui-btn-normal" id="seven-download-schedule" >下载(7天调时率）</a>-->
                    <a class="layui-btn layui-btn-normal" id="weather-download" >40天天气下载</a>
                </div>
            </div>
        </div>

        <div class="layui-form-item" pane="">
            <label class="layui-form-label">显示数据</label>
            <div class="layui-input-block">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="历史出发准点率" value="dep_ontime_rate" checked = "">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="历史到达准点率" value="arr_ontime_rate" checked = "">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="出发延误30分钟内百分比" value="dep_delay_inThirtyM">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="出发延误30分钟-1小时内百分比" value="dep_delay_thirtyMToOneH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="出发延误1小时-3小时内百分比" value="dep_delay_oneHToThreeH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="出发延误3小时以上百分比" value="dep_delay_overThreeH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="到达延误30分钟内百分比" value="arr_delay_inThirtyM">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="到达延误30分钟-1小时内百分比" value="arr_delay_thirtyMToOneH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="到达延误1小时-3小时内百分比" value="arr_delay_oneHToThreeH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="到达延误3小时以上百分比" value="arr_delay_overThreeH">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="出发平均延误时间" value="dep_avgDelayTime">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="到达平均延误时间" value="arr_avgDelayTime">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="航班取消率" value="cancel_rate" checked = "">
                <input type="checkbox" name="like1[]" lay-skin="primary" title="调时率" value="scheduleChange_rate" checked = "">
            </div>
        </div>
    </form>

    <table id="test2" lay-filter="test2"></table>
@endsection
@push('script')
    <script src="/static/echarts/echarts.min.js"></script>
    <script src="/static/xml-select/xm-select.js"></script>
    <script>
        layui.use(['table','form','laydate'], function() {
            var $ = layui.$
                ,table = layui.table
                ,form = layui.form
                ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#start_at'
                ,type: 'date'
            });

            //日期
            laydate.render({
                elem: '#weather_day'
                ,type: 'date'
            });


            var orderField = xmSelect.render({
                el: '#order_field',
                language: 'zn',
                name: 'order_field',
                theme: {
                    color: '#666', // 设置主题颜色
                },
                data: [
                    {name: '起飞准点率（降）', value: 'depOntimeRate/1'},
                    {name: '到达准点率（降）', value: 'arrOntimeRate/1'},
                    {name: '航班取消率（升）', value: 'cancelRate/0'},
                    {name: '航班调时率（升）', value: 'depOntimeRate/0'},
                ]
            });

            var weatherType = xmSelect.render({
                el: '#weather_type',
                language: 'zn',
                name: 'weather',
                theme: {
                    color: '#666', // 设置主题颜色
                },
                data: [
                    {name: '多云', value: '多云'},
                    {name: '多云转阴', value: '多云转阴'},
                    {name: '多云转小雨', value: '多云转小雨'},
                    {name: '多云转中雨', value: '多云转中雨'},
                    {name: '多云转大雨', value: '多云转大雨'},
                    {name: '阴天', value: '阴天'},
                    {name: '阴转小雨', value: '阴转小雨'},
                    {name: '阴转中雨', value: '阴转中雨'},
                    {name: '阴转大雨', value: '阴转大雨'},
                    {name: '雨', value: '雨'},
                    {name: '小雨', value: '小雨'},
                    {name: '中雨', value: '中雨'},
                    {name: '大雨', value: '大雨'},
                    {name: '暴雨', value: '暴雨'},
                    {name: '小雨转中雨', value: '小雨转中雨'},
                    {name: '小雨转大雨', value: '小雨转大雨'},
                    {name: '小雨转大雨', value: '小雨转大雨'},
                    {name: '小雨转暴雨', value: '小雨转暴雨'},
                    {name: '中雨转大雨', value: '中雨转大雨'},
                    {name: '中雨转暴雨', value: '中雨转暴雨'},
                    {name: '大雨转暴雨', value: '大雨转暴雨'},
                    {name: '暴雨转大雨', value: '暴雨转大雨'},
                ]
            });

            var rateArray = [];
            var rateArrayKey = [];
           /* var rateArray = ['历史出发准点率','历史到达准点率','出发延误30分钟内百分比','出发延误30分钟-1小时内百分比','出发延误1小时-3小时内百分比'
                ,'出发延误3小时以上百分比','到达延误30分钟内百分比','到达延误30分钟-1小时内百分比','到达延误1小时-3小时内百分比','到达延误3小时以上百分比','出发平均延误时间'
                ,'到达平均延误时间','航班取消率','调时率'];

            var rateArrayKey = ['dep_ontime_rate','arr_ontime_rate','dep_delay_inThirtyM','dep_delay_thirtyMToOneH','dep_delay_oneHToThreeH'
                ,'dep_delay_overThreeH','arr_delay_inThirtyM','arr_delay_thirtyMToOneH','arr_delay_oneHToThreeH','arr_delay_overThreeH','dep_avgDelayTime','arr_avgDelayTime'
                ,'cancel_rate','scheduleChange_rate'];*/

            var rateStaticArray = function () {
                rateArray = [];
                rateArrayKey = [];
                // 遍历所有checkbox的值
                $('input[type="checkbox"]').each(function(){
                    var $this = $(this);
                    if($this.prop('checked')) {

                        console.log($this.val());

                        rateArray.push($this.attr('title'));
                        rateArrayKey.push($this.val());
                    }
                });
            }


            rateStaticArray();

            var statistic = function (flightEcharts,flight) {

                $.ajax({
                    url: '/flightdynamic/ajaxLists?flight_id='+flight.id+'&order_by=asc&start_at='+$('#start_at').val()
                    , method: 'get'
                    , dataType: 'json'
                    , async: false
                    , success: function (data) {

                        data = data.data;


                        var serial = [];
                        var departAts = [];
                        var serial = [];


                        for(var k=0;k<rateArray.length;k++) {

                            serial.push({
                                name: rateArray[k],
                                type: 'line',
                                data: [],
                                smooth: true
                            });
                        }

                        for(var i=0;i<data.length;i++) {

                            var time = data[i].updated_at.substring(0,10);

                            if (departAts.indexOf(time) == -1 ) {

                                departAts.push(time)
                            }

                            for (let key in data[i]) {

                                rateArrayKey.forEach(function (aVal,aK){

                                    if(aVal == key) {

                                        serial[aK]['data'].push(data[i][key])
                                    }
                                })
                            }
                        }

                        var optionPies = {
                            title: {
                                text: ''
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    label: {
                                        backgroundColor: '#6a7985'
                                    }
                                }
                            },
                            legend: {
                                data: rateArray
                            },
                            toolbox: {
                                feature: {
                                    saveAsImage: {}
                                }
                            },
                            grid: {
                                left: '3%',
                                right: '4%',
                                bottom: '3%',
                                containLabel: true
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    boundaryGap: false,
                                    data: departAts ? departAts : ["1979-01-01"]
                                }
                            ],
                            yAxis: [
                                {
                                    type: 'value'
                                }
                            ],
                            series: serial
                        };

                        flightEcharts.clear();
                        flightEcharts.setOption(optionPies);

                    }
                });
                flightEcharts.resize();

            }


            table.render({
                id: 'test2'
                ,elem: '#test2'
                ,url: '/flight/ajaxLists'
                ,page: { //详细参数可参考 laypage 组件文档
                    curr: 1
                    ,groups: 20
                    ,first: false
                    ,last: false
                    ,layout: ['limit', 'prev', 'page', 'next', 'count','refresh', 'skip'] //自定义分页布局
                }
                //,height: 300
                ,cellMinWidth: 80
                ,limit : 10
                ,limits: [5,10,30,50]
                //,skin: 'line'
                ,toolbar: false
                ,done: function(res, curr, count){

                    // 表格数据渲染完毕后的回调
                    // 假设我们要在第二行后面添加一行
                    res.data.forEach(function (item, index) {

                        var tr = $(".layui-table").find("tbody tr[data-index='" + index + "']");

                        //设置颜色
                        tr.css("background-color", "#1976d2");
                        tr.css("color", "#FFFFFF");
                        // 给1-0-9列添加样式
                        tr.find(".laytable-cell-1-0-9").css("color","red");


                        var tr = $(".layui-table").find("tbody tr[data-index='" + index + "']");

                        tr.after('<tr> <td colspan="19"><div id="echarts-flight-'+index+'" style="background-color:#ffffff;min-height:300px;padding: 10px"></div></td></tr>');

                        var flightEcharts = echarts.init(document.getElementById('echarts-flight-'+index), 'walden');

                        statistic(flightEcharts,item);
                    });

                }
                ,parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                    tableData =  res.data

                    return {
                        "code": res.errcode, //解析接口状态
                        "msg": res.errmsg, //解析提示文本
                        "count": res.meta.total, //解析数据长度
                        "data":res.data,
                    };
                }
                ,request: {
                    pageName: 'page' //页码的参数名称，默认：page
                    ,limitName: 'page_size' //每页数据量的参数名，默认：limit
                }
                ,cols: [[
                    {field: 'id', 'title':'ID',width:50}
                    ,{field: 'airline', 'title':'航司'}
                    ,{field: 'depart_code', 'title':'起飞'}
                    ,{field: 'arrived_code', 'title':'到达'}
                    ,{field: 'flight_code', 'title':'航班'}
                    /*,{field: 'day', 'title':'查询天数'}*/
                ]]

            });



            //监听提交
            form.on('submit(*)', function(data){

                rateStaticArray();

                table.reload('test2',{
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where:data.field
                });

                return false;
            });

            var jsonToParams = function (json) {
                var params = Object.keys(json).map(function(key) {
                    return encodeURIComponent(key) + '=' + encodeURIComponent(json[key]);
                }).join('&');
                return params;
            }

            $('#dynamic-download').on('click',function () {


                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/download?'+paramStr;
            });

            //30天延误>=100
            $('#dynamic-download-delay').on('click',function () {


                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/downloadDelay?'+paramStr;
            });

            //价格空间下载
            $('#dynamic-download-price').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);
                window.location.href = '/flight/downloadPriceSpace?'+paramStr;
            })

            //7天下载
            $('#seven-download').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/downloadSevenData?'+paramStr;
            })

            //7天延误>=80
            $('#seven-download-delay').on('click',function () {
                
                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/downloadSevenDataDelay?'+paramStr;
            })

            //7天调时率>=70
            $('#seven-download-schedule').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);

                window.location.href = '/flight/downloadSevenSchedule?'+paramStr;
            })

            //天气下载
            $('#weather-download').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);
                window.location.href = '/weather/download?'+paramStr;
            })

            //七天数据下载
            $('#dynamic-download-data').on('click',function () {

                var formData = form.val('first');
                var paramStr = jsonToParams(formData);
                window.location.href = '/flight/sevenData?'+paramStr;
            });


        });
    </script>

@endpush